<template>
  <!-- 弹窗容器，用 Element UI 的 Dialog 组件示例，也可自己写固定定位 + 遮罩 -->
  <el-dialog
    title="个人设置"
    :visible.sync="dialogVisible"
    width="600px"
    @close="handleClose"
  >
    <div class="settings-content">
      <!-- 头像、用户名、手机号区域 -->
      <div class="user-info">
        <div class="avatar">
          <!-- 实际可替换成动态头像，这里用占位 -->
          <img :src="$baseUrl + '/upload/'+form.avatarUrl ||  require('@/assets/image/head.svg')" alt="avatar" />
        </div>
        <div class="user-meta">
          <p class="username">{{form.nickname}}</p>
          <p class="phone">{{form.phone}}</p>
        </div>
      </div>
      <!-- 功能列表 -->
    <div class="arrow-list-container">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo arrow-menu"
          background-color="transparent"
          text-color="#303133"
          active-text-color="#409EFF"
        >
          <el-menu-item index="1" class="menu-item"  @click="setPer">
            <i class="el-icon-user left-icon"></i>
            <span slot="title">个人资料</span>
            <i class="el-icon-arrow-right arrow-icon"></i>
          </el-menu-item>
          <el-menu-item index="2" class="menu-item" @click="ThemeSwitch">
            <i class="el-icon-star-off left-icon"></i>
            <span slot="title">主题设置</span>
            <i class="el-icon-arrow-right arrow-icon"></i>
          </el-menu-item>
          <el-menu-item v-if="form.admin" index="3" class="menu-item" @click="KnowledgeBase">
            <i class="el-icon-menu left-icon"></i>
            <span slot="title">知识库管理</span>
            <i class="el-icon-arrow-right arrow-icon"></i>
          </el-menu-item>
        <!--  <el-menu-item index="4" class="menu-item" @click="setRole">
            <i class="el-icon-setting left-icon"></i>
            <span slot="title">角色配置</span>
            <i class="el-icon-arrow-right arrow-icon"></i>
          </el-menu-item> -->
          <el-menu-item v-if="form.admin" index="5" class="menu-item"  @click="setUserMange">
            <i class="el-icon-user left-icon"></i>
            <span slot="title">用户管理</span>
            <i class="el-icon-arrow-right arrow-icon"></i>
          </el-menu-item>
          <el-menu-item index="6" class="menu-item" @click="clickAboutUS">
            <i class="el-icon-info left-icon"></i>
            <span slot="title">关于我们</span>
            <i class="el-icon-arrow-right arrow-icon"></i>
          </el-menu-item>
          <el-menu-item index="7" class="menu-item" @click="outLogin">
            <span slot="title">退出登录</span>
            <i class="el-icon-switch-button arrow-icon"></i>
          </el-menu-item>
        </el-menu>
      </div>

    </div>

    <!-- 个人信息设置 -->
    <PersonalInfoDialog  ref="settingsPer"/>
    <!-- 用户管理 -->
    <UserManager  ref="userMange"/>
    <!-- <userRole
      :visible="dialog"
      :role="currentRole"
      :isEdit="isEditing"
      @save="handleSave"
      @close="dialog = false"
    /> -->
     <KnowledgeDialog  ref="settingsKnowledge"/>
     <ThemeSwitchModal  ref="setThemeSwitchModal" @themeChanged='themeChanged'/>

     <!-- 关于我们 -->
      <AboutUS ref="aboutUs" />
  </el-dialog>
</template>
<script>
  import PersonalInfoDialog from './PersonalInfoDialog.vue';
  import KnowledgeDialog from './KnowledgeDialog.vue';
  import UserManager from './UserManager.vue';
  import ThemeSwitchModal from './ThemeSwitchModal.vue';
  import AboutUS from './AboutUS.vue';
   // import userRole from './userRole.vue';
export default {
  name: 'SettingsDialog',
  components: {
    PersonalInfoDialog,
    UserManager,
    // userRole,
    KnowledgeDialog,
    ThemeSwitchModal,
    AboutUS
  },
  data() {
    return {
      currentRole:'',
      isEditing:false,
       dialog: false, // 控制弹窗显隐
      dialogVisible: false, // 控制弹窗显隐
      theme: 'light' ,// 当前主题，默认浅色
      form: {
        avatarUrl:'',
        nickname: '低空经济',
        phone: '15803888688',
        account: '15803888688'
      }
    }
  },
  mounted() {
    this.$root.Bus.$on('refreshList', value => {
      let userInfo=JSON.parse(sessionStorage.getItem("userInfo"))
             this.form.avatarUrl=userInfo.head
             this.form.nickname=userInfo.nickname
             this.form.phone=userInfo.phone
    })
  },
  methods: {
    // 打开弹窗
    open() {
      this.dialogVisible = true
      let userInfo=JSON.parse(sessionStorage.getItem("userInfo"))
      this.form.nickname=userInfo.nickname
      this.form.phone=userInfo.phone
      this.form.account=userInfo.phone
       this.form.avatarUrl=userInfo.head
      this.form.admin = userInfo.admin
      const savedTheme = localStorage.getItem('app-theme')
      document.documentElement.className = savedTheme || 'light'
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      // 可在这里通知父组件关闭，或做其他清理
    },
    setPer(){
     this.$nextTick(()=>{
       this.$refs.settingsPer.open()
     })
    },
    // 用户管理
    setUserMange(){
     this.$nextTick(()=>{
       this.$refs.userMange.open()
     })
    },
    clickAboutUS() {
      this.$nextTick(()=>{
       this.$refs.aboutUs.open()
     })
    },
    // 角色管理
    setRole(){
       this.dialog=true
    },
    // 主题回调
    themeChanged(val){
      console.log('设置主题')
    },
    ThemeSwitch(){
         this.$refs.setThemeSwitchModal.initTheme()
    },
    handleSave(){},
    // 知识库管理
    KnowledgeBase(){
      this.$nextTick(()=>{
        this.$refs.settingsKnowledge.open()
      })
    },
    outLogin(){
      this.$confirm('确认退出登录吗？', '提示信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
              })
                .then(() => {
                  // 执行保存相关操作
                   sessionStorage.setItem("token",'');
                   sessionStorage.setItem("userInfo",'');
                   this.$router.push('/login');
                })
                .catch(action => {
                 	if(action === 'cancel'){
      				// 执行打印相关操作
      			}else{
      				// 关闭图标触发
      			}
                });
    },
    // 切换主题
    handleThemeChange(newTheme) {
      this.theme = newTheme
      // 实际可结合项目全局样式，动态添加/移除 dark 类名，控制页面主题
      document.body.className = newTheme === 'dark' ? 'dark-theme' : ''
    },
    // 退出登录逻辑（示例，可emit给父组件处理）
    handleLogout() {
      // 这里可调用退出接口、清除token等
      this.$message.warning('退出登录逻辑待实现')
    }
  }
}
</script>

<style scoped>
/* 弹窗内容区域样式 */
.settings-content {
  padding: 16px;
}
/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 12px;
}
.user-meta .username {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 9px;
}
.user-meta .phone {
  font-size: 12px;
  color: #999;
  margin: 0;
}
/* 菜单样式微调 */
.settings-menu {
  border-right: none; /* 去掉 Element UI 菜单默认右边框 */
}




.arrow-menu {
  border-radius: 4px;
  border: 0;
}

>>>.menu-item {
  margin: 10px 0; /* 上下间距10px */
  background-color: #f3f7fa !important; /* 浅色背景 */
  border-radius: 4px;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #b2b4b8 !important; /* 悬停时背景色加深 */
}

.left-icon {
  margin-right: 8px;
}

.arrow-icon {
  float: right;
  line-height:55px;
  color: #c0c4cc;
  transition: transform 0.3s;
}

.el-menu-item:hover .arrow-icon {
  color: #409EFF;
  transform: translateX(3px);
}

/* 移除ElementUI默认的菜单项样式 */
.el-menu-item {
  border-radius: 4px !important;
}

</style>
